import { RichUtils } from "draft-js"
import { RichEditorProps } from "../toolbar"
import { ToggleGroupButton, ToggleGroupContainer } from "../components/ToggleButton"
import onClickify from "../libs/onClickify"
import useCurrentStyle from "../hooks/useCurrentStyle"
import { FontBoldIcon, FontItalicIcon, UnderlineIcon, StrikethroughIcon } from '@radix-ui/react-icons';


const inlineStyles = [{
    icon: <FontBoldIcon />,
    value: "BOLD"
}, {
    icon: <FontItalicIcon />,
    value: "ITALIC"
}, {
    icon: <UnderlineIcon />,
    value: "UNDERLINE"
}, {
    icon: <StrikethroughIcon />,
    value: "STRIKETHROUGH"
}]
const INLINE = ({
    editorState,
    onChange
}: RichEditorProps) => {
    const currentStyle = useCurrentStyle(editorState);
    return (
        <ToggleGroupContainer>
            {inlineStyles.map(({ icon, value }) => (
                <ToggleGroupButton
                    key={value}
                    value={value}
                    checked={currentStyle.has(value)}
                    onMouseDown={onClickify(() => {
                        onChange(
                            RichUtils.toggleInlineStyle(editorState, value)
                        )
                    })}
                >
                    {icon}
                </ToggleGroupButton>
            ))}
        </ToggleGroupContainer>
    )
}
export default INLINE
